<template>
  <div>
    <div class="title_header">
      <div class="left_info">
        <el-badge class="item" style="font-size: 25px;margin-right: 40px;">
          <i class="el-icon-search"></i>
        </el-badge>
        <el-badge :value="12" class="item" style="font-size: 25px;margin-right: 40px;">
          <i class="el-icon-chat-dot-round"></i>
        </el-badge>
        <el-dropdown trigger="click" >
          <el-badge class="item" style="font-size: 25px;margin-right: 40px;">
            <i class="el-icon-user"></i>
          </el-badge>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="clearfix">
              评论
              <el-badge class="mark" :value="12"/>
            </el-dropdown-item>
            <el-dropdown-item class="clearfix">
              回复
              <el-badge class="mark" :value="3"/>
            </el-dropdown-item>
            <el-dropdown-item class="clearfix" >
              个人中心
              <el-badge class="mark" :value="3"/>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Header"
}
</script>

<style scoped>
.title_header {
  height: 48px;
  border-bottom: 2px #e6e8eb solid;
  background-color: white;
  width: 100%;
  position: relative;
  padding-top: 15px;
}

.left_info {
  position: absolute;
  right: 10px;
}
</style>
